<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Progress</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="main-container">
    <div id="progress-container">
        <div id="progress-component"><!-- Встраиваем сюда компонент прогресса --></div>
    </div>
    <div id="control-container">
        <div id="control-container-list">
            <div id="value-container">
                <input id="value-input" type="number" min="0" max="100" value="0">
                <label id="value-input-text" for="value-input">Value</label>
            </div>
            <div id="animate-checkbox"><!-- Встраиваем сюда компонент чекбокса --></div>
            <div id="hide-checkbox"><!-- Встраиваем сюда компонент чекбокса --></div>
        </div>
    </div>
</div>
<script src="components/progress/Progress.js"></script>
<script src="components/checkbox/Checkbox.js"></script>
<script>
    // Создаем экземпляр прогресс-бара
    const progress = new Progress(document.getElementById('progress-component'), 55, 'progress');

    // Находим и/или создаем элементы управления
    const valueInput                 = document.getElementById('value-input');
    const animateCheckboxContainer   = new Checkbox(document.getElementById('animate-checkbox'), 'check-1',  'Animate');
    const hideCheckboxContainer      = new Checkbox(document.getElementById('hide-checkbox'),    'check-2',  'Hide');
    
    // передаем именно элементы чекбокса
    const animateCheckbox   = animateCheckboxContainer.getCheckbox();
    const hideCheckbox      = hideCheckboxContainer.getCheckbox();

    // Задаем необходимые события для управления компонентом
    valueInput.addEventListener('input', () => {
        valueInput.value = (valueInput.value < 0) ? 0 : (valueInput.value > 100) ? 100 : valueInput.value;
        progress.setValue(parseInt(valueInput.value));
    });

    animateCheckbox.addEventListener('change', () => {
        progress.setAnimate(animateCheckbox.checked);
    });

    hideCheckbox.addEventListener('change', () => {
        progress.setHide(hideCheckbox.checked);
    });

</script>
</body>
</html>